<template>
	<view class="check">
		<!-- 舌象图审核 -->
		<view class="Imagecheck" v-if="imgCheck">
			<view class="Imagecheck-content">
				<image class="check-img" :src="Imagecheck"></image>
				<text class="Imagecheck-text">舌象图审核</text>
				<view class="svg" v-if="svg1">
					<img style="width: 56rpx; height: 33rpx" src="/static/test.svg" />
				</view>
			</view>
			<view class="Imagecheck-result">{{ checkText }}</view>
		</view>
		<!-- 失败 -->
		<view class="Imagecheck" v-if="Back">
			<view class="Imagecheck-content">
				<image class="check-img" :src="falseIcon"></image>
				<text class="Imagecheck-text">舌象图审核</text>
				<view class="back" @click="goBack()">重新上传</view>
			</view>
			<view class="Imagecheck-result">{{ backText }}</view>
		</view>
		<!-- 失败-->

		<!-- 舌象状态 -->
		<view class="Imagecheck" v-if="imgStatus">
			<view class="line"></view>
			<view class="Imagecheck-content">
				<image class="check-img" :src="ImageStatus"></image>
				<text class="Imagecheck-text">舌象状态</text>
				<view class="svg" v-if="svg2">
					<img style="width: 56rpx; height: 33rpx" src="/static/test.svg" />
				</view>
			</view>
			<view class="Imagecheck-result">{{ statuText }}</view>
			<!-- //问题表单 -->
			<view class="questionnaire" v-if="questionStatu">
				<view class="questionnaire-subject">
					<view class="" v-if="NO">
						<text class="questionnaire-subject-text">请根据您三个月内的体验和感觉，是否存在以下症状:</text>
						<view class="subjects" v-for="(item, index_o) in questionList" :key="item.questionIndex">
							<text class="subjects-title">{{ item.questionIndex }}.{{ item.questionContent }}</text>
							<br />
							<view class="btns">
								<button
									class="chose-button"
									plain="true"
									v-for="(btn, index_i) in buttonList[index_o]"
									:key="index_i"
									@click="handleClick(btn, item.questionIndex, index_o, index_i)"
									:style="{ backgroundColor: btn.color }"
								>
									{{ btn.label }}
								</button>
							</view>
							<video class="questionImg" :src="item.multiMediaJsonV2.video"></video>
						</view>
						<button class="up-question" @click="submitAnswers()">提交</button>
					</view>
					<view class="subjects-OK" v-if="OK">问卷已提交成功</view>
				</view>
			</view>
		</view>
		<!-- 舌象报告 -->
		<view class="ImageReport" v-if="imgReport">
			<view class=".long-line"></view>
			<view class="Imagecheck-content">
				<image class="check-img" :src="ImageReport"></image>
				<text class="Imagecheck-text">舌象图审核</text>
				<view class="svg3" v-if="svg3">
					<img style="width: 56rpx; height: 33rpx" src="/static/test.svg" />
				</view>
			</view>
			<view class="Imagecheck-result">{{ reportText }}</view>
		</view>
	</view>
</template>

<script>
import * as TongueApi from '@/api/tongue/tongue.js';
export default {
	onLoad(options) {
		// console.log(options);
		this.$globalData.isRefresh = true;
		const paramsStr = options.params;
		const receivedParams = JSON.parse(paramsStr); // 将参数字符串解析为对象
		this.id = receivedParams.data;
		this.tongueImage = receivedParams.tongueImage;
		this.faceImage = receivedParams.faceImage;
		// //获取Type值 来判断提交审核的阶段
		if (this.faceImage.faceFrontImgUrl === '') {
			this.returnType(this.id, 1);
		} else {
			this.returnType(this.id, 2);
		}
	},
	onUnload() {
		clearTimeout(this.returnTime);
	},

	data() {
		return {
			returnTime: null,
			buttonColor: '#f8f8f8',
			id: '', //用户
			reportid: '', //报告
			timer: 0,
			falseIcon: 'https://zhinengjiayi.oss-cn-chengdu.aliyuncs.com/home/detection_icon_error_default%402x.png.png',
			Back: false,
			backText: '审核未通过，未检测到舌象',
			Imagecheck: 'https://zhinengjiayi.oss-cn-chengdu.aliyuncs.com/static/home/detection_icon_one_default%402x%281%29.png',
			imgCheck: true,
			checkText: '审核中，请耐心等待',
			ImageStatus: 'https://zhinengjiayi.oss-cn-chengdu.aliyuncs.com/static/home/detection_icon_two_default%402x%281%29.png',
			imgStatus: false,
			statuText: '分析中，请耐心等待',
			ImageReport: 'https://zhinengjiayi.oss-cn-chengdu.aliyuncs.com/static/home/detection_icon_three_default%402x%281%29.png',
			reportText: '报告生成中，请耐心等待',
			imgReport: false,
			type: '',
			tongueImage: {
				//这里是用户信息
				szReportId: null,
				szCheckTopImgUrl: '',
				szCheckBackImgUrl: '',
				szCheckAge: '',
				szCheckSex: ''
			},
			faceImage: {
				szReportId: null,
				faceFrontImgUrl: '',
				faceLeftImgUrl: '',
				faceRightImgUrl: '',
				szCheckAge: '',
				szCheckSex: ''
			},
			svg1: true,
			svg2: true,
			svg3: true,
			questionStatu: false,
			NO: false,
			OK: false,
			buttonValues: [],
			questionList: [],
			answerList: {
				outId: '',
				inquiryAnswers: [
					{
						questionIndex: 0,
						answerCode: ''
					}
				]
			},
			receivedResult: {},
			result: {}, //获取结果
			buttonList: [],
			isInitBtn: false
		};
	},
	methods: {
		//返回上传舌诊页面
		goBack() {
			this.$globalData.isRefresh = true;
			uni.$goBack();
		},

		//确认提交
		async input() {
			uni.$showMsg('正在提交');
			TongueApi.Input(this.tongueImage)
				.then((res) => {
					if (res.data.code === 0) {
						console.log('调用');

						this.returnType(this.id, 1);
					}
				})
				.catch((error) => {
					console.log('错误', error);
				});
		},
		//确认提交
		async faceinput() {
			uni.$showMsg('面诊正在提交');
			const res = await TongueApi.faceInput(this.faceImage);
			console.log('面诊的响应：', res);
			if (res.data.code === 201) {
				this.imgReport = false;
				this.imgStatus = false;
				uni.$showMsg('没有检测出结果！');
				this.imgCheck = false;
				this.Back = true;
				this.backText = '图片上传失败请重新上传！';
			} else {
				setTimeout(() => {
					this.returnType(this.id, 2);
				}, 15000);
			}
		},

		//获取回调信息
		async returnType(id, reportType) {
			if (this.timer >= 6) return uni.$showMsg('请求超时', 3000);
			// 获取回调
			this.returnTime = setTimeout(async () => {
				this.timer++;
				const res = await TongueApi.returnType(this.id, reportType);
				if (res.data.code === 300) {
					uni.$showMsg('没有检测出结果！');
					this.Unqualified();
				}
				const returnInfo = res.data.data;
				console.log(returnInfo.returnType);

				if (res.data.code === 200) {
					// 32： error
					if (returnInfo.returnType === 32) {
						this.Unqualified(res.data.msg);
						uni.$showMsg('请重新上传！');
						this.timer = 0;
					} // 31: suceess
					else if (returnInfo.returnType === 31) {
						this.svg1 = false;
						this.qualified(true);
					} else if (returnInfo.returnType === 0) {
						this.svg2 = false;
						this.questionList = returnInfo.inquiryQuestions;

						// 如果没被初始化才进行按钮渲染;
						if (this.isInitBtn===false) {
							for (let i = 0; i < this.questionList.length; i++) {
								this.buttonList.push([]);
								this.setInitButtons(i);
							}
							this.isInitBtn = true;
						}

						this.answerList.outId = returnInfo.outId;
						if (this.questionList[0] !== undefined) {
							this.inquiryQuestions(this.questionList);
							this.timer = 0;
							return;
						}
						this.qualified(false);
					} else if (returnInfo.returnType === 1) {
						this.svg3 = false;
						this.reportid = returnInfo.outId;
						this.getRuslt();
					} else if (returnInfo.returnType === 2) {
						uni.$showMsg('上传错误');
					} else if (returnInfo.returnType === 110) {
						this.returnType(this.id, 1);
					} else if (returnInfo.returnType === 111) {
						console.log(returnInfo);
						uni.$showMsg('上传错误');
						this.imgReport = false;
						this.imgStatus = false;
						uni.$showMsg('没有检测出结果！');
						this.imgCheck = false;
						this.Back = true;
						this.backText = returnInfo.error.msg;
						this.timer = 0;
					} else if (returnInfo.returnType === 100) {
						this.input();
						setTimeout(() => {
							console.log('111111');
							this.returnType(this.id, 1);
						}, 2000);
					} else if (returnInfo.returnType === 101) {
						console.log(returnInfo);
						uni.$showMsg('上传错误');
						this.imgReport = false;
						this.imgStatus = false;
						uni.$showMsg('没有检测出结果！');
						this.imgCheck = false;
						this.Back = true;
						this.backText = returnInfo.error.msg;
						this.timer = 0;
					}
				}
			}, 6000);
		},

		setInitButtons(index) {
			console.log(`调用${index}`);
			this.questionList.map((item, index_this) => {
				if (index_this === index) {
					const result = this.splitAnswerOptions(item.answerOptions);
					// console.log(result)
					result.map((value) => {
						// console.log(value)
						this.buttonList[index].push({
							label: value,
							color: '#F3F3F5'
						});
					});
					return;
				}
			});
		},

		// returnType=31 预判为合法图片，此时您可以调用“阶段二：确认提交检测”接口
		qualified(flg) {
			if (flg) {
				this.Imagecheck = 'https://zhinengjiayi.oss-cn-chengdu.aliyuncs.com/home/detection_icon_success_default%402x.png.png'; //先把一的样式改了
				this.checkText = '审核完成';
				this.imgStatus = true;
			}
			if (this.faceImage.faceFrontImgUrl === '') {
				this.input();
			} else {
				this.faceinput();
			}
		},
		//不合格
		Unqualified(receivedResult) {
			// returnType=32 预判为不合法图片，此时您可以反馈给用户，并且不推荐继续调用“阶段二：1、确认提交检测”接口
			this.imgCheck = false;
			this.Back = true;
			this.backText = receivedResult.data.error.msg;
		},
		// returnType=1 说明返回的最终体质结果，此时您可以保存结果并返回给用户
		//获得结果
		getRuslt() {
			uni.$toPage(
				'/subpkg/AIdiagnos/InspectionReport/InspectionReport',
				{
					reportid: this.reportid
				},
				false,
				false,
				true
			);
		},
		//获得题目
		inquiryQuestions(list) {
			this.statuText = '分析完成,请填写下述问卷，以便输出更好结果';
			this.questionStatu = true;
			this.NO = true;
			// 初始化
			list.forEach((item) => {
				this.buttonValues.push({
					questionIndex: item.questionIndex,
					answerCode: item.defaultOption,
					subAnswers: ''
				});
			});
		},
		// 监听按钮选择
		handleClick(button, questionIndex, index_o, index_i, color) {
			this.buttonList[index_o].map((item) => {
				item.color = '#F3F3F5';
			});

			this.$set(this.buttonList[index_o], index_i, {
				label: button.label,
				color: button.color === '#F3F3F5' ? '#DFA13C' : '#F3F3F5'
			});

			this.buttonValues.map((item) => {
				if (item.questionIndex === questionIndex) {
					// 	有这个问题的索引则赋值
					item.answerCode = button.label;
				}
			});
			this.answerList.inquiryAnswers = this.buttonValues;
			// console.log(this.answerList)
		},

		//提交问卷
		submitAnswers() {
			this.NO = false;
			this.OK = true;
			this.ImageStatus = 'https://zhinengjiayi.oss-cn-chengdu.aliyuncs.com/home/detection_icon_success_default%402x.png.png';
			this.imgReport = true;
			this.answer(); //先提交问卷
			//在提交和获取
		},

		//提交问题
		async answer() {
			const { data: res } = await TongueApi.Answer(this.answerList);
			// console.log(res);
			if (res.code === 204) {
				return uni.$showMsg(res.msg);
			} else if (res.code === 200) {
				// console.log(res);
				this.returnType(this.id, 1);
			}
		},

		//解析选项
		splitAnswerOptions(options) {
			// 将字符串按照逗号分隔成数组
			const optionArray = options.split(',');
			return optionArray;
		}
	}
};
</script>

<style lang="scss">
.check {
	height: 100vh;
	width: 100vw;
	padding: 0;
	margin: 0;
	overflow-y: scroll;
	margin: 40rpx 0 0 20rpx;

	// <!-- 舌象图审核 -->
	.Imagecheck {
		margin-top: 76rpx;

		.line {
			margin-top: -70rpx;
			margin-bottom: 20rpx;
			margin-left: 30rpx;
			width: 1rpx;
			height: 60rpx;
			opacity: 1;
			border-left: 1rpx solid rgba(0, 0, 0, 1);
			// background-color: rgba(0, 0, 0, 1;
		}

		.Imagecheck-content {
			display: flex;

			.check-img {
				width: 60rpx;
				height: 60rpx;
				opacity: 1;
			}

			.Imagecheck-text {
				margin-left: 10rpx;
				margin-top: -10rpx;
				/** 文本1 */
				font-size: 32rpx;
				font-weight: 400;
				letter-spacing: 0rpx;
				line-height: 38.72rpx;
				color: rgba(0, 0, 0, 1);
				text-align: left;
				vertical-align: top;
			}

			.svg {
				// position: relative;
				margin-top: -10rpx;
				margin-left: 10rpx;
				width: 56rpx;
				height: 33rpx;
			}

			.svg2 {
				margin-top: -10rpx;
				margin-left: 10rpx;
				width: 56rpx;
				height: 33rpx;

				image {
					position: absolute;
					top: -80rpx;
					left: 200rpx;
				}
			}
		}

		.Imagecheck-result {
			margin-top: -20rpx;
			margin-left: 70rpx;
			font-size: 24rpx;
			font-weight: 400;
			letter-spacing: 0rpx;
			line-height: 34.76rpx;
			color: rgba(85, 85, 87, 1);
			text-align: left;
			vertical-align: top;
		}

		.back {
			margin-left: 345rpx;
			font-size: 28rpx;
			font-weight: 400;
			letter-spacing: 0rpx;
			line-height: 40.54rpx;
			color: rgba(223, 161, 60, 1);
			text-align: left;
			vertical-align: top;
		}

		//问卷调查
		.questionnaire {
			// border: 1px solid black;
			margin: 20rpx 0 20rpx 60rpx;

			.questionnaire-subject {
				margin: 30rpx 0 -25rpx 0;
				width: 600rpx;
				opacity: 1;
				border-radius: 14rpx;
				background: rgba(255, 255, 255, 1);
				padding: 15rpx;

				.questionnaire-subject-text {
					margin: 20rpx 0;
					width: 560rpx;
					height: 36rpx;
					opacity: 1;
					/** 文本1 */
					font-size: 24rpx;
					font-weight: 400;
					letter-spacing: 0rpx;
					line-height: 34.76rpx;
					color: rgba(136, 135, 135, 1);
					text-align: left;
					vertical-align: top;
				}

				.subjects {
					margin: 20rpx 0;

					.subjects-title {
						margin: 20rpx 0;
						width: 590rpx;
						height: 82rpx;
						opacity: 1;
						/** 文本1 */
						font-size: 28rpx;
						font-weight: 400;
						letter-spacing: 0rpx;
						line-height: 40.54rpx;
						color: rgba(0, 0, 0, 1);
						text-align: left;
						vertical-align: top;
					}

					.btns {
						display: flex;

						.chose-button {
							margin: 20rpx 18rpx;
							height: 40rpx;
							border-radius: 12rpx;
							/** 文本1 */
							font-size: 24rpx;
							font-weight: 400;
							letter-spacing: 0rpx;
							line-height: 40rpx;
							color: rgba(0, 0, 0, 1);
							background-color: #f3f3f5;
							text-align: center;
							vertical-align: top;
						}

						.chose-button[plain] {
							border: 0;
						}
					}

					.questionImg {
						width: 538rpx;
						height: 280rpx;
						opacity: 1;
						background-size: 100%;
					}
				}

				.up-question {
					margin-top: 60rpx;
					margin-bottom: 40rpx;
					width: 310rpx;
					height: 88rpx;
					opacity: 1;
					border-radius: 26rpx;
					background: rgba(223, 161, 60, 1);
					/** 文本1 */
					color: rgba(255, 255, 255, 1);
				}
			}

			.subjects-OK {
				/** 文本1 */
				font-size: 28rpx;
				font-weight: 400;
				letter-spacing: 0rpx;
				line-height: 40.54rpx;
				color: rgba(85, 85, 87, 1);
				text-align: left;
				vertical-align: top;
			}
		}
	}

	// <!-- 舌像报告 -->
	.ImageReport {
		margin-top: 90rpx;

		.long-line {
			margin-top: -70rpx;
			margin-bottom: 20rpx;
			margin-left: 30rpx;
			width: 1rpx;
			height: 60rpx;
			opacity: 1;
			border-left: 1rpx solid rgba(0, 0, 0, 1);
		}

		.Imagecheck-content {
			display: flex;

			.check-img {
				width: 60rpx;
				height: 60rpx;
				opacity: 1;
			}

			.Imagecheck-text {
				margin-left: 10rpx;
				margin-top: -10rpx;
				/** 文本1 */
				font-size: 32rpx;
				font-weight: 400;
				letter-spacing: 0rpx;
				line-height: 38.72rpx;
				color: rgba(0, 0, 0, 1);
				text-align: left;
				vertical-align: top;
			}

			.svg3 {
				margin-top: -10rpx;
				margin-left: 10rpx;
				width: 56rpx;
				height: 33rpx;
			}
		}

		.Imagecheck-result {
			margin-top: -20rpx;
			margin-left: 70rpx;
			font-size: 24rpx;
			font-weight: 400;
			letter-spacing: 0rpx;
			line-height: 34.76rpx;
			color: rgba(85, 85, 87, 1);
			text-align: left;
			vertical-align: top;
		}
	}
}

.check {
	::-webkit-scrollbar {
		display: none;
	}
}
</style>
